<template>
  <div class="input-outer">
    <page-header title="输入验证码"/>
    <div class="input">
      <h3 class="tips">请输入验证码</h3>
      <input
        v-model="mobile" id="input"
        @input="inputHandler"
        class="input-element"
        type="tel"
      />
      <ul @click="toInput" class="input-box">
        <li
          :class="{active: index === mobile.length - 1}"
          v-for="(item, index) in 6"
          :key="index"
        >{{mobile[index]}}</li>
      </ul>
      <p v-if="mobile.length === 6" class="success">您输入的验证码是{{mobile}}</p>
    </div>
  </div>
</template>
<script>
import PageHeader from './../../components/common/header';

export default {
  components: {
    PageHeader,
  },
  data() {
    return {
      mobile: '',
    };
  },
  methods: {
    toInput() {
      document.querySelector('#input').focus();
    },
    inputHandler() {
      // 必须输入数字
      this.mobile = this.mobile.replace(/\D/g, '');
      if (this.mobile.length > 6) {
        this.mobile = this.mobile.slice(0, 6);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.input-outer{
  .input{
    margin: 2rem 1rem;
    .tips{
      font-size: .5rem;;
      color: #999;
    }
    .input-element{
      // 清除input元素的占位空间
      position: absolute;
      // 将元素缩小 简介解决 input在ios系统 输入光标问题
      transform: scale(0);
    }
    .input-box{
      width: 100%;
      display: flex;
      margin: 20px 0;
      justify-content: space-between;
      li{
        width: 1rem;
        height: 1rem;
        line-height: 1rem;
        border: 1px solid #ececec;
        border-radius: 6px;
        vertical-align: middle;
        text-align: center;
      }
      .active {
        border-color: #e0818f;
      }
    }
    .success{
      font-size: .3rem;
      color: #e0818f;
    }
  }
}
</style>

